<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}VXBattle - 网页版游戏{% endblock %}</title>
    <link href="{{ url_for('static', filename='css/bootstrap.min.css') }}" rel="stylesheet">
    <link href="{{ url_for('static', filename='css/all.min.css') }}" rel="stylesheet">
    <style>
        body {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        .game-container {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
            backdrop-filter: blur(10px);
        }
        .navbar-brand {
            font-weight: bold;
            font-size: 1.5rem;
        }
        .btn-primary {
            background: linear-gradient(45deg, #667eea, #764ba2);
            border: none;
            border-radius: 25px;
            padding: 10px 25px;
            transition: all 0.3s ease;
        }
        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }
        .card {
            border: none;
            border-radius: 15px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
        }
        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
        }
        .progress {
            height: 8px;
            border-radius: 10px;
        }
        .status-online {
            color: #28a745;
        }
        .status-offline {
            color: #dc3545;
        }
        .character-card {
            background: linear-gradient(135deg, #f8f9fa, #e9ecef);
        }
        .location-card {
            background: linear-gradient(135deg, #e3f2fd, #bbdefb);
        }
        .idle-status {
            background: linear-gradient(135deg, #fff3e0, #ffcc02);
        }
    </style>
    {% block extra_css %}{% endblock %}
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container">
            <a class="navbar-brand" href="{{ url_for('index') }}">
                <i class="fas fa-gamepad me-2"></i>VXBattle
            </a>
            <div class="navbar-nav ms-auto">
                {% if session.username %}
                    <span class="navbar-text me-3">
                        <i class="fas fa-user me-1"></i>{{ session.username }}
                    </span>
                    <a class="nav-link" href="{{ url_for('logout') }}">
                        <i class="fas fa-sign-out-alt me-1"></i>登出
                    </a>
                {% else %}
                    <a class="nav-link" href="{{ url_for('login') }}">
                        <i class="fas fa-sign-in-alt me-1"></i>登录
                    </a>
                    <a class="nav-link" href="{{ url_for('register') }}">
                        <i class="fas fa-user-plus me-1"></i>注册
                    </a>
                {% endif %}
            </div>
        </div>
    </nav>

    <main class="container mt-4">
        {% block content %}{% endblock %}
    </main>

    <!-- Toast 通知容器 -->
    <div class="toast-container position-fixed bottom-0 end-0 p-3">
        <div id="toast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
            <div class="toast-header">
                <i class="fas fa-info-circle me-2 text-primary"></i>
                <strong class="me-auto">系统通知</strong>
                <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
            </div>
            <div class="toast-body" id="toast-body">
                <!-- 通知内容 -->
            </div>
        </div>
    </div>

    <script src="{{ url_for('static', filename='js/bootstrap.bundle.min.js') }}"></script>
    <script>
        // 显示通知
        function showToast(message, type = 'info') {
            const toast = document.getElementById('toast');
            const toastBody = document.getElementById('toast-body');
            const toastHeader = toast.querySelector('.toast-header i');
            
            toastBody.textContent = message;
            
            // 设置图标和颜色
            toastHeader.className = `fas me-2`;
            if (type === 'success') {
                toastHeader.classList.add('fa-check-circle', 'text-success');
            } else if (type === 'error') {
                toastHeader.classList.add('fa-exclamation-circle', 'text-danger');
            } else if (type === 'warning') {
                toastHeader.classList.add('fa-exclamation-triangle', 'text-warning');
            } else {
                toastHeader.classList.add('fa-info-circle', 'text-primary');
            }
            
            const bsToast = new bootstrap.Toast(toast);
            bsToast.show();
        }

        // AJAX 请求封装
        function apiRequest(url, method = 'GET', data = null) {
            const options = {
                method: method,
                headers: {
                    'Content-Type': 'application/json',
                },
                credentials: 'same-origin', // 确保发送session cookies
            };
            
            if (data) {
                options.body = JSON.stringify(data);
            }
            
            return fetch(url, options)
                .then(response => {
                    // 检查是否未登录
                    if (response.status === 401) {
                        // 重定向到登录页面
                        window.location.href = '/login';
                        return Promise.reject(new Error('未登录'));
                    }
                    
                    return response.json();
                })
                .catch(error => {
                    // 如果是未登录错误，不显示错误提示
                    if (error.message !== '未登录') {
                        console.error('API请求失败:', error);
                        showToast('网络请求失败', 'error');
                    }
                    throw error;
                });
        }

        // 格式化时间
        function formatDuration(seconds) {
            const hours = Math.floor(seconds / 3600);
            const minutes = Math.floor((seconds % 3600) / 60);
            const secs = seconds % 60;
            
            if (hours > 0) {
                return `${hours}小时${minutes}分钟${secs}秒`;
            } else if (minutes > 0) {
                return `${minutes}分钟${secs}秒`;
            } else {
                return `${secs}秒`;
            }
        }

        // 格式化经验值
        function formatExp(exp) {
            if (exp >= 1000000) {
                return (exp / 1000000).toFixed(1) + 'M';
            } else if (exp >= 1000) {
                return (exp / 1000).toFixed(1) + 'K';
            }
            return exp.toString();
        }
    </script>
    {% block extra_js %}{% endblock %}
</body>
</html>